<template>
	<view  style="background-color: #f4f4f5;height: 852px;">
		<view class="">
			<u--form labelPosition="left" ref='myForm' :model="phoneFrom">
				<u-form-item label="" prop="phone" borderBottom  style="width: 350px;margin-left:30px;margin-top:20px">
					<u--input v-model="phoneFrom.phone" border="none" placeholder="请输入您的手机号"></u--input>
				</u-form-item>
			</u--form>
		</view>
		 <u--text text="不要与未更改的手机号保持一致" size="14px" color="lightgrey" style="margin-left: 30px;margin-top:20px">
		 </u--text>
		 <u-button color="#00aaff" size="large " text="确认修改" class="u-accountButton" @click="updatePhoneById"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			// 验证手机号的规则
			var cheackMobile = (rule, value, cb) => {
				// 手机号一般最小以“13”开头
				const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (regMobile.test(value)) {
					return cb()
				}
				cb(new Error('请输入正确的手机号!'))
			}
			return {
				// 手机号输入集合
				phoneFrom:{
					// 用户手机号
					phone:'',
				},
				// 登录用户id
				id:'',
				// 自定义校验规则
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: cheackMobile,
							trigger: 'blur'
						}
					]
				},
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		mounted(){
			// 头部获取用户id
			this.id = uni.getStorageSync('id')
		},
		methods: {
			// 修改用户昵称
			updatePhoneById(){
				this.$myRequest({
					url:'/eat-service/userProtal/updatePhoneById',
					method:'get',
					data:{
						'id' : this.id,
						'phone':this.phoneFrom.phone
					}
				}).then(res => {
					if(res.data.flag != null){
						this.account = ''
						uni.showToast({
							title: '修改成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						// 修改成功跳转
						uni.switchTab({
							url: '/pages/my/my',
						})
						window.location.reload();
					} else {
						uni.showToast({
							title: '修改失败',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style>
	.u-accountButton{
		width: 94%;
		margin-top:20px;
		border-radius: 10px 10px 10px 10px;
	}
</style>